<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<!-- 个人信息卡片 -->
		<userinfo-card v-if="userHeadData && userHeadData.style" :scrollTop="scrollTop" :detail="userHeadData"
			@onShare="onShare"></userinfo-card>
		<!-- 自定义模块 -->
		<view v-for="(item, index) in userTemplate" :key="item.id">
			<!-- 轮播 -->
			<sh-banner v-if="item.type === 'banner' && index !== 0" :Px="item.content.x" :Py="item.content.y"
				:borderRadius="item.content.radius" :height="item.content.height" :list="item.content.list"></sh-banner>
			<!-- 滑动宫格 -->
			<sh-grid-swiper v-if="item.type === 'menu'" :list="item.content.list"
				:oneRowNum="item.content.style"></sh-grid-swiper>
			<!-- 广告魔方 -->
			<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
			<!-- 推荐商品 -->
			<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'"
				:detail="item.content"></sh-hot-goods>
			<!-- 富文本 -->
			<sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>
			<!-- 功能列表 -->
			<sh-cell v-if="item.type === 'nav-list'" :list="item.content.list"></sh-cell>
			<!-- 九宫格列表 -->
			<sh-grid v-if="item.type === 'grid-list'" :list="item.content.list"></sh-grid>
			<!-- 钱包 -->
			<sh-wallet v-if="item.type === 'wallet-card'"></sh-wallet>
			<!-- 订单卡片 -->
			<sh-order-card v-if="item.type === 'order-card'"></sh-order-card>
		</view>
		<!-- copyright -->
		<view class="copyright-box u-flex-col u-row-center u-col-center u-p-t-80 u-p-b-50" v-if="initShop.copyright">
			<view class="copyright-text">{{ initShop.copyright[0] }}</view>
			<view class="copyright-text">{{ initShop.copyright[1] }}</view>
		</view>

		<!-- #ifdef H5 -->
		<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
		<!-- #endif -->
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 登录提示 -->
		<shopro-auth-modal :qrCode="qrCode"></shopro-auth-modal>
		<!-- 分享组件 -->
		<shopro-share v-model="showShare" posterType="user"></shopro-share>
		<shopro-tabbar></shopro-tabbar>

		<!-- 设置头像和昵称 -->
		<u-popup mode="center" v-model="showtx" border-radius="14" :mask-close-able="false" :mask="false">
			<view class="form-box u-p-20">
				<view class="head-title u-flex u-col-center u-row-center">设置头像和昵称</view>
				<u-form-item label-width="150" label-position="left" label="设置头像:" prop="url">
					<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar' class="ss-reset-button avatar-btn">
						<image class="avatar-img" :src="url" mode=""></image>
					</button>
				</u-form-item>
				<u-form-item label-width="150" label-position="left" label="设置昵称:" prop="nickname">
					<u-input :placeholderStyle="placeholderStyle" v-model="nickname"
						placeholder="请输入昵称" type="nickname" @change="changeNickname"></u-input>
				</u-form-item>
				<view class="u-flex u-col-center u-row-between">
					<button class="u-reset-button form-cancel-btn u-m-y-40" @tap="showtx = false">取消</button>
					<button class="u-reset-button form-save-btn u-m-y-40" @tap="conserved">确定</button>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import shBanner from './components/sh-banner.vue';
	import shGridSwiper from './components/sh-grid-swiper.vue';
	import shAdv from './components/sh-adv.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shCell from './components/sh-cell.vue';
	import shGrid from './components/sh-grid.vue';
	import shOrderCard from './components/sh-order-card.vue';
	import shWallet from './components/sh-wallet.vue';
	import shHotGoods from './components/sh-hot-goods.vue';

	import userinfoCard from './user/userinfo-card.vue';

	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';

	import share from '@/shopro/share';

	export default {
		components: {
			shBanner,
			shGridSwiper,
			shAdv,
			shRichtext,
			shCell,
			shGrid,
			shWallet,
			shOrderCard,
			shHotGoods,

			userinfoCard
		},
		data() {
			return {
				scrollTop: 0,
				showShare: false,
				enable: false, //是否开启吸顶。
				show: false,
				showtx: false,
				url: '',
				nickname: '',
				fileUrl: '',
				qrCode:'',// 邀请码
			};
		},
		computed: {
			...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType']),
			userHeadData() {
				if (this.userTemplate?.length) {
					return this.userTemplate[0].content;
				}
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

		onShow() {
			if (this.isLogin) {
				this.init();
				this.getUserData();
			}
			this.enable = true;
		},
		onLoad(e) {
		    this.qrCode = e.qr_code
			console.log('this.qrCode',this.qrCode)
		},

		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
			onShare() {
				this.showShare = true;
				uni.hideTabBar();
			},
			// 初始化
			init() {
				let that = this
				this.getUserInfo()
					.then(res => {
						uni.stopPullDownRefresh();
						if (this.userInfo.nickname == '微信用户') {
							this.showtx = true
							this.url = this.userInfo.avatar
							this.fileUrl = this.userInfo.avatar
						}
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
			},
			auth() {
				this.$refs.uModal.clearLoading();
			},
			// 更换头像
			async onChooseAvatar(e) {
				const uploadImageRes = await this.uploadImage(e.detail.avatarUrl);
				this.url = uploadImageRes.fullurl;
				this.fileUrl = uploadImageRes.url;
			},
			// 修改头像和昵称
			conserved() {
				let that = this;
				if (!that.nickname) {
					this.$u.toast('昵称不能为空');
					return false;
				}
				if (that.nickname === '微信用户') {
					this.$u.toast("昵称不能为'微信用户'");
					return false;
				}
				that.$http(
					'user.profile', {
						nickname: that.nickname,
						avatar: that.fileUrl
					},
					'设置中...'
				).then(res => {
					if (res.code === 1) {
						that.getUserInfo();
						that.showtx = false;
						that.$u.toast('设置成功');
					}
				});
			},
			async uploadImage(url) {
				const that = this;
				return new Promise((resolve, reject) => {
					that.$u.toast('上传中...');
					uni.uploadFile({
						url: that.$API_URL + 'index/upload',
						filePath: url,
						name: 'file',
						success: res => {
							res = JSON.parse(res.data);
							if (res.code === 1) {
								that.$u.toast('上传成功');
								resolve(res.data);
							} else {
								that.$u.toast('上传失败');
							}
						},
						complete: e => {
							uni.hideLoading();
						}
					});
				}).catch(e => {
					console.log(e);
				});
			}
		}
	};
</script>

<style lang="scss">
	.copyright-box {
		.copyright-text {
			font-size: 22rpx;
			font-weight: 500;
			color: #c4c4c4;
		}
	}

	// 绑定
	.form-box {
		.head-title {
			height: 100rpx;
			font-size: 34rpx;
			font-weight: 600;
		}

		.form-save-btn {
			width: 340rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(90deg, #a36fff, #5336ff);
			box-shadow: 0 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
			border-radius: 40rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.form-cancel-btn {
			width: 340rpx;
			height: 80rpx;
			line-height: 80rpx;
			border: 1rpx solid #999;
			border-radius: 40rpx;
			font-weight: 500;
			color: #999;
		}
	}

	.avatar-img {
		width: 90rpx;
		height: 90rpx;
		// border-radius: 36rpx;
	}

	.avatar-btn {
		width: 90rpx;
		justify-content: space-between;
	}

	.ss-reset-button {
		padding: 0;
		margin: 0;
		font-size: inherit;
		background-color: transparent;
		color: inherit;
		position: relative;
		border: 0rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		vertical-align: baseline;
		transform: translate(0, 0);
	}

	.form-box {
		.u-form-item--right:first-of-type {
			flex: 0 !important;
		}
	}
</style>